<script setup lang="ts">
import { ref, defineExpose, reactive, defineEmits } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const dialogVisible = ref(false);
const title1 = ref("");
const ruleForm = ref({
  name: "",
  phone: "",
  province: "",
  identity: "",
  role: "",
  status: ""
});
const footerShow = ref(false);
const ruleFormRef = ref<FormInstance>();
const init = (row, title) => {
  resetForm(ruleFormRef.value);
  if (row) {
    ruleForm.value = { ...row };
  }

  footerShow.value = title == "人员详情" ? false : true;
  dialogVisible.value = true;
  title1.value = title;
};
const $emit = defineEmits(["submit"]);
defineExpose({ init });

const rules = reactive<FormRules>({});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      dialogVisible.value = false;
      $emit("submit", Object.assign({}, ruleForm.value));
      formEl.resetFields();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};
const handleClose = (done: () => void) => {
  done();
};
const roleList = ["管理员", "财务经理", "财务", "人力"];
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title1"
    width="450"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
      :disabled="title1 === '人员详情' ? true : false"
    >
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model="ruleForm.phone"
          placeholder="请输入联系电话"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="身份" prop="identity">
        <el-input
          v-model="ruleForm.identity"
          placeholder="请输入身份"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="关联角色" prop="role">
        <el-select
          v-model="ruleForm.role"
          placeholder="请选择关联角色"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="3"
        >
          <el-option
            v-for="item in roleList"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch
          v-model="ruleForm.status"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <template #footer v-if="footerShow">
      <div class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
